<template>
    <div>
        <Row type="flex" class="content">
            <Col span="20" class="articles-box">
            <ArticleListOprerateBar></ArticleListOprerateBar>
            <div class="articles">
                <ArticleListItem v-for="item in articles" :text="item.title" :addr="'/article/' + item.id"></ArticleListItem>
            </div>
            <Page :total="100" show-total show-elevator/>
            </Col>
            <Col span="4" class="btns-box">
            <div class="new-article">
                <Button type="primary" to="/article/new" long ghost><Icon class="icon-p" type="md-add"  size="16"/>新增文章</Button>
            </div>
            <Divider />
            <Menu active-name="1" width="auto">
                <MenuItem name="1">
                    <Icon type="md-document"/>
                    已发布文章
                </MenuItem>
                <MenuItem name="2">
                    <Icon type="md-chatbubbles"/>
                    草稿
                </MenuItem>
            </Menu>
            </Col>
        </Row>
    </div>
</template>

<script type="text/ecmascript-6">
    import {mapState, mapActions} from 'vuex'
    import ArticleListOprerateBar from  '../../components/ArticleListOperateBar.vue'
    import ArticleListItem from '../../components/ArticleListItem.vue'
    export default{
        components: {
            ArticleListOprerateBar,
            ArticleListItem
        },
        data () {
            return {

            }
        },
        computed:{
            ...mapState('article', ['articles']),
        },
        methods: {},
        created(){

        },
        munted(){

        }
    }
</script>

<style scoped>
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
        left: 0;
    }

    .ivu-menu-vertical.ivu-menu-light:after {
        left: 0;
    }

    .content {
        min-height: 500px;
        margin-top: 10px;
    }

    .btns-box:after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        background-color: #dcdee2;
        left: 0;
        top: 0;
        bottom: 0;
    }

    .new-article {
        text-align: center;
        margin:20px 10px 0 10px;
    }

    .articles-box {
        padding-right: 20px;
    }

    .articles{
        margin-bottom:18px;
    }

    .icon-p{
        position:relative;
        top:-1px;
    }

</style>